<template>
	<Row :gutter="32">
		<Col span="16">
			<BtnList :funcId="funcRow.id" ref="btnList"></BtnList>
		</Col>
		<Col span="8">
			<Form :model="formData">
				<FormItem label="功能名" label-position="top">
					<Input v-model="formData.name" placeholder="请输入功能名称" value="用户管理" disabled />
				</FormItem>
				
				<FormItem label="按钮名" label-position="top">
					 <Input v-model="formData.btnName" placeholder="请输入按钮名称" />
				</FormItem>
				
				<FormItem label="权限标识" label-position="top">
					<Input v-model="formData.suffix" placeholder="请输入权限标识,例如 `add`, 会自动添加功能权限标识作为前缀">
						<template #prepend>
						  <span>{{formData.remark}}</span>
						</template>
					</Input>
				</FormItem>
				
				<FormItem label="状态" label-position="top">
				  <Switch size="large" v-model="formData.status">
					<template #open>
					  <span>启用</span>
					</template>
					<template #close>
					  <span>禁用</span>
					</template>
				  </Switch>
				</FormItem>
			</Form>	
		</Col>
	</Row>
	
</template>

<script>

import BtnList from '../components/BtnList.vue'
export default {
  props: {
    funcRow: {
      type: Object,
      required: true
    }
  },
	data() {
		return {
			formData: this.funcRow
		}
	},
	methods: {
    clearFormData() {
       this.formData = {
         id: this.funcRow.id,
         name: '',
         btnName: '',
         remark: this.funcRow.remark,
         status: true,
         suffix: '',
       }
       this.$refs.btnList.showData();
    }
	},
	components: {
    BtnList,
	}
}
</script>

<style scoped>
.icon {
	vertical-align: middle;
	margin: 0 3px;;
}
</style>